<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>yundongkuangjiashili</title>
	<style>
		div {
			width: 200px;
			height: 200px;
			background: yellow;
			float: left;
			margin: 20px;
			border: 10px solid black;
			filter: alpha(opacity:30);
			opacity: 30;
		}
	</style>
	<script>
		window.onload = function ()
		{
			var aDiv1 = document.getElementById("div1");

			aDiv1.onmouseover = function ()
			{
				startMove(this, "height", 500);
			};
			aDiv1.onmouseout = function ()
			{
				startMove(this, "height", 200)
			};

			var aDiv2 = document.getElementById("div2");

			aDiv2.onmouseover = function ()
			{
				startMove(this, "width", 500);
			};
			aDiv2.onmouseout = function ()
			{
				startMove(this, "width", 200);
			};

			var aDiv3 = document.getElementById("div3");

			aDiv3.onmouseover = function ()
			{
				startMove(this, "fontSize", 50);
			};
			aDiv3.onmouseout = function ()
			{
				startMove(this, "fontSize", 5);
			};
			var aDiv4 = document.getElementById("div4");

			aDiv4.onmouseover = function ()
			{
				startMove(this, "opacity", 100);
			};
			aDiv4.onmouseout = function ()
			{
				startMove(this, "opacity",30);
			};
			var aDiv5 = document.getElementById("div5");

			aDiv5.onmouseover = function ()
			{
				startMove(this, "borderWidth", 80);
			};
			aDiv5.onmouseout = function ()
			{
				startMove(this, "borderWidth",10);
			}
		};


			function getStyle(obj, name)
			{
				if (obj.currentStyle)
				{
					return obj.currentStyle[name];
				}
				else {
					return getComputedStyle(obj, false)[name];
				}
			}

			function startMove(obj, attr, iTarget) {
				clearInterval(obj.timer);
				obj.timer = setInterval(function () {
					var cur = 0;
					if (attr == "opacity") {
						cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
					}
					else {
						cur = parseInt(getStyle(obj, attr));
					}
					var speed = (iTarget - cur) / 6;
					speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
					if (cur == iTarget) {
						clearInterval(obj.timer);
					}
					else {
						if (attr == "opacity") {
							obj.style.filter = "alpha(opacity:" + (cur + speed) + ")";
							obj.style.opacity = (cur + speed) / 100;

						}
						else {
							obj.style[attr] = cur + speed + "px";
						}
					}
				}, 30)

			}




	</script>
</head>
<body>
<div id="div1">变高</div>
<div id="div2">变宽</div>
<div id="div3">wefssjkjd</div>
<div id="div4"></div>
<div id="div5"></div>

</body>
</html>